<template>
  <div class="about-page">
    <section class="hero">
      <h1>关于我们</h1>
      <p>用更好的设计与工艺，为热爱运动与生活的你打造每一步舒适</p>
    </section>

    <section class="content">
      <div class="grid">
        <div class="card">
          <h3>我们的使命</h3>
          <p>提供高性价比的优质鞋品，让每个人都能享受舒适与美感。</p>
        </div>
        <div class="card">
          <h3>可持续发展</h3>
          <p>我们关注环保，从材料选择到生产流程尽量降低碳足迹。</p>
        </div>
        <div class="card">
          <h3>服务承诺</h3>
          <p>7天无理由退换、快速发货、专属客服，伴你安心购物。</p>
        </div>
      </div>
    </section>
  </div>
</template>

<style scoped>
.about-page .hero {
  padding: 40px 20px;
  text-align: center;
  background: linear-gradient(135deg, #f6f9ff, #eef5ff);
}
.about-page .hero h1 {
  margin: 0 0 8px;
  font-size: 28px;
  color: #1f2d3d;
}
.about-page .hero p {
  margin: 0;
  color: #666;
}
.about-page .content {
  max-width: 1000px;
  margin: 20px auto 40px;
  padding: 0 20px;
}
.about-page .grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}
.about-page .card {
  background: #fff;
  border: 1px solid #eef0f4;
  border-radius: 12px;
  padding: 20px;
}
</style>
